<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 4000px;
      background: -webkit-linear-gradient(top left, lightblue, lightpink, lightyellow);
    }

    .link {
      display: none;
      position: fixed;
      right: 30px;
      bottom: 230px;
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      background: lightcoral;
      font-size: 16px;
      color: #000000;
      text-decoration: none;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <a href="javascript:;" id="link" class="link">回到顶部</a>

  <script>
    let link = document.getElementById('link');
    let HTML = document.documentElement;
    
    function check() {
      let winH = HTML.clientHeight;
      let scrollT = HTML.scrollTop;
      link.style.display = scrollT >= winH * 2 ? 'block' : 'none';
    }
    window.onscroll = check;

    link.onclick = function() {
      link.style.display = 'none';
      window.onscroll = null;
      let step = 100;
      let timer = setInterval(() => {
        let currentT = HTML.scrollTop;
        currentT -= step;
        if(currentT === 0) {
          clearInterval(timer);
          window.onscroll = check;
          return;
        }
        HTML.scrollTop = currentT;
      }, 17);      
    }
  </script>
</body>
</html>